<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图书列表</title>
		<link rel="stylesheet" href="layui/css/layui.css" />
	</head>
	<body>
		<h1 style="text-align: center;color: #1e9fff;margin-bottom: 20px;">图书列表</h1>

		<form class="layui-form layui-row layui-col-space5">
			<div class="layui-col-md2">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
					</div>
					<input type="text" name="bookName" placeholder="图书名称" class="layui-input" lay-affix="clear">
				</div>
			</div>
			<div class="layui-col-md2">
				<div class="layui-input-wrap">
					<div id="cId" class="xm-select-demo"></div>
				</div>
			</div>
			<div class="layui-col-md2">
				<div class="layui-input-wrap">
					<select name="status">
						<option value="">是否上架</option>
						<option value="0">下架</option>
						<option value="1">上架</option>
					</select>
				</div>
			</div>
			<div class="layui-col-md3">
				<div class="layui-input-wrap">
					<input type="text" class="layui-input" name="time" id="ID-laydate-range-datetime" placeholder="请选择时间范围">
				</div>
			</div>
			<div class="layui-col-md2">
				<button class="layui-btn" lay-submit lay-filter="search">搜索</button>
				<button type="reset" id="reset" class="layui-btn layui-btn-primary">清空</button>
			</div>
		</form>

		<!-- 根据后端数据生成数据表格 -->
		<table class="layui-hide" id="test" lay-filter="test"></table>

		<script src="layui/layui.js"></script>
		<script src="js/xm-select.js"></script>
		<script>
			layui.use(function() {
				// 获取table组件的对象
				let table = layui.table;
				let $ = layui.$; // jQuery已经集成到layui包内，所以直接从layui获取即可
				let layer = layui.layer;
				let laydate = layui.laydate;
				let form = layui.form;

				// 搜索提交
				form.on('submit(search)', function(data)
				{
					var field = data.field; // 获得表单字段
					
					let time = field.time;
					if (time && time.length > 0)
					{
						let times = time.split("-");
						if (times && times.length == 2)
						{
							field.start = times[0].trim();
							field.end = times[1].trim();
						}
					}
					
					
					// 执行搜索重载
					table.reload('test', {
						page: {
							curr: 1 // 重新从第 1 页开始
						},
						where: field // 搜索的字段
					});
					
					return false; // 阻止默认 form 跳转
				});

				// 获取分类列表
				$.getJSON("http://127.0.0.1:8080/getCategoryList", function(d) {
					if (d.code == 0) {
						// sm-select下拉框
						var demo1 = xmSelect.render({
							el: '#cId',
							prop: {
								name: 'categoryName',
								value: 'categoryId'
							},
							// max: 1,
							name: 'categoryId',
							filterable: true,
							radio: true,
							theme: {
								color: '#0081ff'
							},
							data: d.data
						});

						// 绑定清空事件
						$('#reset').click(function() {
							demo1.setValue([]);
						});
					} else {
						layer.msg(d.msg);
					}
				});

				// 日期时间范围
				laydate.render({
					elem: '#ID-laydate-range-datetime',
					type: 'datetime',
					format: 'yyyy/MM/dd HH:mm:ss',
					range: true
				});

				// 头部工具栏事件
				table.on('toolbar(test)', function(obj) {
					let event = obj.event;

					if (event == 'addBook') {
						// 添加事件
						layer.open({
							title: "添加图书",
							type: 2, // page层类型
							content: "book-add.html",
							area: ["500px", "600px"],
							closeBtn: 1,
							end: function() {
								// 刷新表格
								table.reload("test");
							}
						});
					} else if (event == 'batchDel') {
						let id = obj.config.id;
						let checkStatus = table.checkStatus(id);
						// 选中图书的列表
						let list = checkStatus.data;

						if (list && list.length == 0) {
							layer.msg('没有选择要删除的数据');
						} else {
							// 批量删除事件
							layer.confirm('确认是否删除', {
								btn: ['确定', '取消']
							}, function(index) {
								// 构建参数
								let arr = [];

								for (let i = 0; i < list.length; i++) {
									arr.push(list[i].bookId);
								}

								// ajax
								$.ajax({
									type: "post",
									url: "http://127.0.0.1:8080/batchDeleteBook ",
									data: JSON.stringify(arr),
									contentType: "application/json",
									dataType: "json",
									success: function(d) {
										if (d.code == 0) {
											// 重新加载表格数据
											table.reload("test");
										} else {
											layer.msg(d.msg);
										}
									}
								});

								// 关闭弹出层
								layer.close(index);
							});
						}

					}
				});

				// 单元格事件处理
				table.on('tool(test)', function(obj) {
					// 删除
					if (obj.event == 'del') {

						layer.confirm('确定删除？', {
							btn: ['确定', '取消']
						}, function(index) {
							// 点击确定
							// 删除
							let bookId = obj.data.bookId;
							// ajax调用
							$.getJSON("http://127.0.0.1:8080/deleteBook", {
								bookId: bookId
							}, function(d) {
								if (d.code === 0) {
									// 删除成功，表格数据刷新
									// layer.msg(d.msg)
									table.reload("test");
								} else {
									layer.msg(d.msg)
								}
							});
							// 关闭提示框
							layer.close(index);
						});
					}
					// 更新
					else if (obj.event == 'edit') {
						// 更新事件
						layer.open({
							title: "更新图书",
							type: 2, // page层类型
							content: "book-edit.html?status=" + obj.data.status + "&categoryId=" + obj
								.data.categoryId,
							area: ["500px", "600px"],
							closeBtn: 1,
							end: function() {
								// 刷新表格
								table.reload("test");
							},
							success: function(layero, index, that) {
								// 获取 iframe 中 body 元素的 jQuery 对象
								var body = layer.getChildFrame('body', index);
								// 给 iframe 页中的某个输入框赋值
								body.find('#bookId').val(obj.data.bookId);
								body.find('#bookName').val(obj.data.bookName);
								body.find('#authorName').val(obj.data.authorName);
								body.find('#price').val(obj.data.price);
								body.find('#picId')[0].scr = "http://127.0.0.1:8080" + obj.data
									.bookUrl;
								body.find('#createTime').val(obj.data.createTime);
								body.find('#bookAddress').val(obj.data.bookAddress);
								body.find('#bookUrl').val(obj.data.bookUrl);
							}
						});
					}
				});

				// 调用对象中的函数进行表格
				table.render({
					elem: "#test",
					url: "http://127.0.0.1:8080/getBooksPage",
					page: true,
					request: {
						pageName: 'pageNo',
						limitName: 'pageSize'
					},
					parseData: function(res) {
						return {
							"code": res.code,
							"msg": res.msg,
							"count": res.data.total,
							"data": res.data.page
						}
					},
					// toolbar: true,
					toolbar: `
						<div>
							<button type="button" lay-event="batchDel" class="layui-btn layui-btn-sm layui-bg-red">批量删除</button>
							<button type="button" lay-event="addBook" class="layui-btn layui-btn-sm layui-bg-blue">添加</button>
						</div>
					`,
					cols: [
						[{
								type: 'checkbox',
								fixed: 'left'
							},
							{
								title: "图书编号",
								field: "bookId"
							},
							{
								title: "图书名称",
								field: "bookName"
							},
							{
								title: "图书封面",
								templet: function(d) {
									return "<img src='http://127.0.0.1:8080/" + d.bookUrl + "' />";
								}
							},
							{
								title: "图书作者",
								field: "authorName"
							},
							{
								title: "图书分类",
								templet: function(d) {
									return d.category.categoryName
								}
							},
							{
								title: "图书价格",
								field: "price",
								sort: true
							},
							{
								title: "是否上架",
								// filed:"status"
								templet: function(d) {
									return d.status == 1 ? '<span class="layui-badge">上架</span>' :
										'<span class="layui-badge layui-bg-green">下架</span>';
								}
							},
							{
								title: "创建时间",
								field: "createTime"
							},
							{
								title: "操作",
								templet: function(d) {
									let s =
										'<button type="button" lay-event="edit" class="layui-btn layui-btn-xs layui-bg-normal">更新</button>';
									s +=
									'<button type="button" lay-event="del" class="layui-btn layui-btn-xs layui-bg-red">删除</button>';
									return s;
								}
							}
						]
					]
				});
			});
		</script>
	</body>
</html>